<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/bootstrap.css">
  <script src="js/jquery-slim.min.js"></script>
  <script src="js/popper.min.js"></script>
  <script src="js/bootstrap.js"></script>
  <title>05_form</title>
</head>

<body>
  <h3 style="margin-left: 10px">表单</h3>

  <div class="container ml-2">
    <div class="font-weight-bold">1.表单元素的排列方向 </div>
    <div class="ml-2">
      (1)form-inline: 内联表单,水平排列(弹性, x轴, 可换行) <br>
      (2)form-group: 堆叠表单,垂直 <br>
    </div>
    <br>

    <div class="font-weight-bold">2.input的类 </div>
    <div class="ml-2">
      (1)form-control: 是所有文本框,密码框的基本类(w-100,内边框,字号,过渡,圆角) <br>
      (2)col-form-label-sm/lg: 改变文本到边框的距离, 文本大小,文本框大小 <br>
      (3).form-check>.form-check-input: 改变了checkbox一点点位置 <br>
    </div>
    <br>


    例: <br>
    <form action="" class="form-group">
      <div>用户名:
        <input type="text" class="form-control col-form-label-sm">
      </div>
      <div>用户密码:
        <input type="text" class="form-control col-form-label-lg"></div>
      <div class="form-check">
        <input type="checkbox" class="form-check-input" id="auto_login">
        <label for="auto_login">自动登录</label>
      </div>
      <button class="btn btn-success">登录</button>
    </form>


  </div>


  <br><br><br><br><br><br><br>
</body>

</html>